{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}

{% block title %}语音识别模型基准测试系统{% endblock %}

{% block page_content %}
<div class="page-header">
    <a href="{{ url_for('.dire',subpath=subpath.rsplit('/',1)[0]) }}">返回上一级目录</a>
    <h1>{{ subpath }}{% if isdire %}目录{% else %}文件{% endif %}</h1>
    {% for entry in entries %}
    <p><a href="{{ url_for('.dire',subpath=subpath+'/'+entry) }}">{{ entry }}</a></p>
    {% endfor %}
    {% if content %}<pre style="word-wrap: break-word;white-space: pre-wrap;">{{ content }}</pre>{% endif %}<br>
    {% if multimedia_type=='wav' %}
    <audio controls>
        <source src="/download?subpath={{ subpath }}" type="audio/wav">
    </audio>
    {% endif %}
    <br>
    {% if isdire %}<input type="file" name="files" id="f" multiple><a class="btn btn-default" href="javascript:void(0);" onclick="ready2upload()">在此目录中上传文件</a><label id="percentProgress"></label><br><a href="{{ url_for('.dire',subpath=subpath) }}">刷新显示目录中的文件</a><br>
    <input type="text" name="subdir_name" id="subdir_name_input"><a class="btn btn-default" href="javascript:void(0);" onclick="create_subdir()">新建文件夹</a><br>{% endif %}
    <a class="btn btn-default" href="{{ url_for('.direc_delete',subpath=subpath) }}">删除本{% if isdire %}目录{% else %}文件{% endif %}</a>
    <script type="text/javascript">
        const f=document.getElementById('f');
        const percentProgress=document.getElementById('percentProgress');
        const subdir_name_input=document.getElementById('subdir_name_input');

        function upload(){
            const fdata=new FormData();
            for(const file of f.files){
                fdata.append('files',file);
            }
            $post('/upload?subpath={{ subpath }}',fdata,percentProgress);
        }

        function $post(url,data,percentProgress){
            const xhr=new XMLHttpRequest();
            xhr.open('post',url,true);
            xhr.upload.addEventListener('progress',function(e){
                if(e.lengthComputable){
                    let percentComplete=e.loaded/e.total;
                    percentProgress.innerHTML=parseInt(percentComplete*100)+'%';
                }
            });
            xhr.send(data)
        }

        function ready2upload(){
            if(!f.files){
                alert('请选择文件');
                return;
            }
            upload();
        }

        function create_subdir(){
            $.ajax({
                type:'GET',
                url:'/subdir_create?subpath={{ subpath }}&subdir_name='+subdir_name_input.val(),
                success:function(data,status,request){
                    location.reload();
                },
                error:function(){
                    alert('创建目录的过程中出现错误');
                }
            });
        }
    </script>
</div>
{% endblock %}